<template>
    <div style="background: #f3f5f9;">
        <div class="ser">
            <div class="search">
                <input type="text" placeholder="请输入关键字..." v-model="name">
                <button type="submit" @click="search"><img src="@/assets/sfj/images/ser.png" alt=""></button>
            </div>
        </div>
        <div class="search-form">
            <van-dropdown-menu active-color="#1989fa">
                <van-dropdown-item v-model="classify" :options="option1"/>
                <van-dropdown-item v-model="region" :options="option2"/>
            </van-dropdown-menu>
        </div>

        <ul class="list01">
            <office-child-table-list :name="name" :classify="classify" :region="region"></office-child-table-list>
        </ul>
    </div>
</template>

<script>
    import officeChildTableList from '@/componets/office-child-table';

    import Vue from 'vue';
    import {DropdownItem, DropdownMenu} from 'vant';
    import 'vant/lib/dropdown-menu/style';
    import 'vant/lib/dropdown-item/style';

    Vue.use(DropdownMenu);
    Vue.use(DropdownItem);

    export default {
        name: "list01",
        data() {
            return {
                option1: [
                    {text: '分类', value: ''},
                    {text: '司法局', value: '司法局'},
                    {text: '司法所', value: '司法所'},
                    {text: '法律服务所', value: '法律服务所'},
                    {text: '律师事务局', value: '律师事务局'},
                    {text: '法律援助', value: '法律援助'},
                    {text: '公证处', value: '公证处'},
                    {text: '人民调解', value: '人民调解'},
                ],
                option2: [
                    {text: '区域', value: ''},
                    {text: '建湖', value: '建湖'},
                    // {text: '建阳', value: '建阳'},
                ],
                classify: '',
                region: '',
                page: 1,
                limit: 10,
                name: '',
                list: [],
                pageAll: 0,
                loading: false,
                finished: false,
                noData: false, // 如果没有数据，显示暂无数据
            }
        },
        components: {
            officeChildTableList
        },
        methods: {
            search() {
                this.page = 1;
                this.limit = 10;
            }
        },
    }
</script>

<style scoped>
    @import "../../assets/sfj/css/base.css";
    @import "../../assets/sfj/css/other.css";
    @import "../../assets/sfj/css/swiper.min.css";
    @import "../../assets/sfj/css/resetui.css";

    .search-form{
        margin: 0 5%;
        padding-block: 0 3%;
    }
</style>